<?php

//js для редактирования формы
$this->headScript()->appendFile("/js/form.js");

//подлючение js и css файлов jqGrid и UI
$this->JQueryGrid()->addFiles();

$this->headStyle("#category_dialog * { overflow-x:hidden }");

?>

<script type="text/javascript">

$(document).ready(function() {
	var formId = "<?= $this->form->getId() ?>";
	var dialogBoxId = "category_dialog";
	var dialogBoxGridId = "category_grid";
	var containerId = "category_list";

	var dialogBoxGridOptions = {
		datatype: "json",
		colNames: ["Название", "Код", "ID"],
		colModel: [
			{name: "name", index: "name", width: 240},
			{name: "code", index: "code", width: 160},
			{name: "id", index: "id", width: 50},
		],
		mtype: "GET",
		url: "/catalogue/admin/list-category-model-custom",
		viewrecords: false,
		autowidth: true,
		width:580,
		height:240,
		treeGrid: true,
		treeGridModel: 'adjacency',
        treedatatype: 'json',
        ExpandColumn: 'name',
        ExpandColClick: true
	}

	var elementName = "catalogue[category]";

	function addCategory(rowId) {
		var name = elementName + "[" + rowId + "]";
		var id = elementName.replace(/[\]\[]/g, "-") + rowId;
		var row = $("#" + dialogBoxGridId).jqGrid("getRowData", rowId);

		$("<input type=\"hidden\" id=\"" + id +"\" name=\"" + name + "\" value=\"" + rowId + "\" />").appendTo($("#" + formId));

		var button = $("<span class\"width2\"></span>").button({
			icons: {
				primary: "ui-icon-close"
			},
			text: false
		}).click(function() {
			if (confirm("Удалить привязку к категории?")) {
				$("#" + id).remove();
				$(this).parent().remove();
			}
		});

		var item = $("<li></li>").append("<span>" + row["name"] + "</span>").append("<span>&nbsp;</span>").append(button);
		
		item.appendTo($("#" + containerId));
	}

	$("#select_category").find("button").button().click(function() {
		$("#" + dialogBoxId).dialog("open");
	});

	$("#" + dialogBoxId).dialog({
		autoOpen: false,
		height: 400,
		width: 612,
		modal: false,
		title: "Выберите категорию из каталога",

		open: function(event, ui) {
			$("#" + dialogBoxGridId).jqGrid(dialogBoxGridOptions);
		},

		buttons: {
			"Выбрать": function() {
				var rowId = $("#" + dialogBoxGridId).jqGrid("getGridParam", "selrow");
				if (rowId > 0) {
					addCategory(rowId);
				}
				$(this).dialog("close");
			},

			"Закрыть": function() {
				$(this).dialog("close");
			}
		}
	});
});

</script>

<div id="select_category" class="mb1 zend_form">
	<fieldset>
		<legend>Привязка к модулю "Каталог"</legend>
		<div id="category_dialog">
			<table id="category_grid"></table>
		</div>
		<div class="ma2">
			<button type="button">Выбрать категорию</button>
		</div>
		<div class="ma2">
			<ul id="category_list" class="list "></ul>
		</div>
	</fieldset>
</div>
